import './Com.css'
import axios from 'axios'
import React from 'react'
import withRouter from '../router/withRouter'


class Com extends React.Component {
    state = {
        hero: [],
        navList: [
            {
                name: "全部",
                type: "all",
            }, {
                name: "法师",
                type: "mage"
            }, {
                name: "战士",
                type: "fighter"
            }, {
                name: "坦克",
                type: "tank"
            }, {
                name: "刺客",
                type: "assassin"
            }, {
                name: "射手",
                type: "marksman"
            }, {
                name: "辅助",
                type: "support"
            }
        ],
        value: "",
        roles: 'all'

    }
    componentDidMount() {
        axios.get('https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js?ts=2792372')
            .then(({ data }) => {
                this.setState({
                    hero: data.hero
                })
            });

    }
    search = (v) => {
        this.setState({
            value: v
        })
    }
    click = (v) => {
        this.setState({
            roles: v
        })
    }
    render() {
        let { hero, navList, value, roles } = this.state
        console.log(hero);
        let navigate = this.props.navigate
        return (
            <div className='box'>
                <div className="hearder">
                    <input type="text" value={value} onChange={e => this.search(e.target.value)} placeholder='搜索' />
                    <div className="navList">
                        <ul>
                            {navList.map((item, index) => {
                                return <li key={index} className={roles === item.type ? 'click' : ''} onClick={() => this.click(item.type)}>{item.name}</li>
                            })}
                        </ul>
                    </div>
                </div>
                <div className='main'>
                    <ul>
                        {hero.map((item, index) => {
                            if (item.name.includes(value) && item.roles.includes(roles) && roles !== 'all') {
                                return <li key={index} onClick={() => {
                                    navigate(`/hero?id=${item.heroId}`)
                                }}>
                                    <img src={`https://game.gtimg.cn/images/lol/act/img/champion/${item.alias}.png`} alt="" />
                                    <p className='heroName'>{item.name}</p>
                                </li>
                            } else if (item.name.includes(value) && roles === 'all') {
                                return <li key={index} onClick={() => {
                                    navigate(`/hero?id=${item.heroId}`)
                                }}>
                                    <img src={`https://game.gtimg.cn/images/lol/act/img/champion/${item.alias}.png`} alt="" />
                                    <p className='heroName'>{item.name}</p>
                                </li>
                            }else{
                                return ''
                            }
                            // return (item.roles.includes(roles) && item.name.includes(value) && roles !== 'all') && <li key={index}>{item.name}</li>
                        })}
                    </ul>
                </div>
            </div >
        )
    }
}

export default withRouter(Com)